<template>
  <div class="container">
    <!--    <page-loading :loading="loadingFirst"/>-->
    <div class="leftTab">
      <el-tabs tab-position="left" class="demo-tabs" @tabChange="tabChange" v-model="activeCode">
        <el-tab-pane v-for="(item,index) in menuList" :label="item.name"
                     :name="item.name"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="contentNews" ref="scrollContent">
      <div class="fileContent">
        <div class="fileItem" v-for="(item, index) in allData" :key="index">
          <div class="title"
               @click="setHrefUrlTool(item.fileType, item.fileUrl, item.id, item.bizType)">
            {{ item.title }}
          </div>
          <div style="margin-bottom:12px;">
            <span
              class="label companyName"
              v-if="item.related && item.related.length > 0"
              @click="toF9(item.related[0].id)"
            >{{ item.related[0].shortName || item.related[0].name }}</span
            >
            <span
              class="label type"
              v-if="
                      item.labels && item.labels.length > 0
                    "
              :style="{
                       background: item.labels[0].bgColor,
                       color: item.labels[0].color,
                    }"
            >{{ item.labels[0].name }}</span>
          </div>
          <div style="padding-bottom:12px;">
            <span class="date">{{ timeTrans(item.date) }}</span>
            <span class="source"  v-if="item.source">{{' · '+ item.source }}</span>
          </div>
        </div>
      </div>
      <vc-list-status
        :len="allData.length"
        :total="totalSize"
        :dom="scrollContent"
        loadingSpin=".contentNews"
        :showScreenLoading="isLoadingFlag"
        @reach="getListData(false)"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import {getEsgList, getNewsTab} from "@/views/modules/news/apis";
import { setHrefUrlTool, timeTrans, toF9 } from "@/utils";


let loadingFirst = $ref(true)
let activeCode = $ref()
let scrollContent = ref(),
  loading = ref(),
  queryData = $ref<any>({
    searchTxt: '',
    pageSize: 15,
    pageNum: 1
  }),
  totalSize = $ref(0),
  allData = $ref<any>([]),
  isLoadingFlag = $ref(false);

//获取左侧tab栏目
const {data: menuList} = useRequest(getNewsTab, {
  onSuccess(res) {
    console.log(res)
    activeCode = res[0].name
    queryData.type = res[0].type
    queryData.code = res[0].code
    // getListData(true)
  }
})

const tabChange = (name) => {
  let filterItem = menuList.value.filter((item) => item.name === name)[0]
  queryData.type = filterItem.type
  queryData.code = filterItem.code
  getListData(true)
}

const getListData = (isInit = false) => {
  if (!isInit) {
    queryData.pageNum++;
  } else {
    allData = [];
    queryData.pageNum = 1;
    isLoadingFlag = true;
    (scrollContent.value as HTMLElement).scrollTop = 0;
  }
  getEsgList(queryData)
    .then((res) => {
      totalSize = res.total;
      // res.values.map((item) => {
      //   item.collect = false;
      // });
      allData = allData.concat(res.items);
    })
    .finally(() => {
      isLoadingFlag = false;
      loadingFirst = false
    });
};

onMounted(() => {
  // getListData(true);
});

</script>
<style lang="scss" scoped>
:deep(.el-tabs__item.is-left) {
  text-align: center;
}

:deep(.el-tabs__active-bar.is-left){
  width: 0;
}
:deep(.el-tabs__item.is-active) {
  background: #E6F7FF;
  font-weight: 500;
  color: #02C680 ;
  background: rgba(231,247,243,0.3) ;
  border-radius: 4px 4px 4px 4px ;
  opacity: 1;
}

:deep(.el-tabs__nav-wrap.is-left::after) {
  width: 0;
}

:deep(.el-tabs__header.is-left) {
  margin-right: 2px;
}

:deep(.el-tabs__item) {
  width: 124px;
  height: 40px;
  margin-left: 8px;
  color: #333333 ;
  font-size: 14px ;
  font-weight: 400 ;
}

.container {
  display: flex;
  background: #f5f5f5;
  height: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  justify-content: center;
  .leftTab {
    height: 637px;
    overflow-y: auto;
    background: #fff;
    width: 140px;
    margin-right: 16px;
    padding-top: 15px;
    box-sizing: border-box;
    border-radius: 4px;
  }

  .contentNews {
    min-width: 900px;
    width: 60vw;
    background: #fff;
    padding: 0px 20px 20px 20px;
    height: 100%;
    overflow-y: auto;
    border-radius: 4px;
    .fileContent {
      .fileItem {
        width: 100%;
        margin-top: 20px;
        border-bottom: 1px solid #F3F3F3;
        .title {
          font-style: normal;
          font-size: 16px;
          line-height: 22px;
          color: #333333;
          margin-bottom: 12px;
          word-break: break-all;
          cursor: pointer;
        }

        span {
          // margin-right: 12px;
          font-size: 12px;
          line-height: 14px;
          font-weight: 400;
          color: #999999;
        }
        .label {
          padding: 0.02rem 0.14rem;
          background: #F5FAFF;
          border-radius: 2px;
          color: #fff;
          display: inline-block;

          &.companyName {
            background: rgba(0,142,244,0.1);
            border-radius: 2px 2px 2px 2px;
            opacity: 1;
            height: 20px;
            margin-right: 5px;
            border: 0px solid rgba(0,142,244,0.3);
            padding: 3px 5px 3px 5px;
            color: #008EF4;
            cursor: pointer;
          }

          &.type {
            padding: 3px 5px 3px 5px;
            color: #666666;
          }
        }
      }

    }
  }
}

</style>
